<!-- 库位管理 -->
<template>
    <div id="repository">
        <!-- 响应式布局 -->
        <!--<el-row >  默认占满屏 一用就把左边的覆盖了，不知道为什么 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="2" :md="2" :lg="3" style="margin: 0 1% 0 1%">
                <el-input placeholder="库位号" v-model="RepositoryNum"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="3" style="margin: 0 1% 0 1%">
                <el-input placeholder="料品编码"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="3" style="margin: 0 1% 0 1%">
                <el-input placeholder="料号" v-model="MaterielNum"></el-input>
            </el-col>

            <el-col :xs="6" :sm="6" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增库位</el-button>
            </el-col>
        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table max-height="600" class="table_station" stripe border ref="multipleTable" :data="tableData"
                  tooltip-effect="dark"
                  style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="ID" sortable label="ID" v-if="false"></el-table-column>
            <el-table-column prop="RepositoryNum" sortable label="库位号"></el-table-column>
            <el-table-column prop="MaterielCode" label="物料编号" v-if="false"></el-table-column>
            <el-table-column prop="MaterielNum" sortable label="料号"></el-table-column>
            <el-table-column prop="SpecExplain" sortable label="规格说明"></el-table-column>
            <el-table-column prop="Specifications" sortable label="规格型号"></el-table-column>
            <el-table-column prop="OperationUser" sortable label="操作用户工号"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作用户名"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount"
                           :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage" layout="total,sizes, prev, pager, next"
                           :total="Total"></el-pagination>
        </div>

        <!--新增库位信息-->
        <el-dialog title="新增库位" :visible.sync="dialogFormVisible" >
            <el-form :model="form" :label-position="labelPosition" label-width="120px">
                <el-form-item label="库位号">
                    <el-input v-model="form.RepositoryNum" auto-complete="off"  style="width: 50%;margin-left: -40%" ></el-input>
                </el-form-item>

                <el-form-item label="物料类型">
                    <el-select  v-model="form.Category" clearable placeholder="原料/辅料" style="width: 50%;margin-left: -40%">
                    <el-option v-for="item in MaterielTypeOptions" :key="item.MaterielCode" :label="item.MaterielName" :value="item.MaterielCode"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>

        <!--删除库位信息-->
        <el-dialog title="删除库位" :visible.sync="DeleteFormVisible" >
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此库位吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>

        <!-- 修改库位信息-->
        <el-dialog title="修改库位" :visible.sync="EditFormVisible" >



            <el-form :model="formEdit" :label-position="labelPosition" label-width="120px">
                <el-form-item label="ID" :label-width="formLabelWidthEdit" v-if="false">
                    <el-input v-model="formEdit.ID" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="库位号">
                    <el-input v-model="formEdit.RepositoryNum" auto-complete="off"  style="width: 50%;margin-left: -40%"></el-input>
                </el-form-item>
                <el-form-item label="物料类型">
                    <el-select  v-model="formEdit.Category" clearable placeholder="原料/辅料" style="width: 50%;margin-left: -40%">
                        <el-option v-for="item in MaterielTypeOptions" :key="item.MaterielCode" :label="item.MaterielName" :value="item.MaterielCode"></el-option>
                    </el-select>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>





    </div>
</template>


<script type="text/javascript">
    export default {
        data (){
            return {
                //    表格
                tableData: [],
                //   按条件 查询
                RepositoryNum: '',
                MaterielNum: '',
                //     分页
                PageCount: 10,    // 每页几条   page-size
                CurrentPage: 1,   // 当前是第几页
                Total: 0,    // 总数

                dialogFormVisible: false,
                formLabelWidth: '100',
                 MaterielTypeOptions:[],    //     物料类型 一加载页面就出现物料类型的下拉框
                labelPosition:'right',
                form:{
                RepositoryNum:'',
                MaterielCode:'',
                OperationUser :''
                },

//                删除库位
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'120',

//                修改库位信息
                EditFormVisible: false,
                formEdit:{},
                formEdited:{},
                formLabelWidthEdit:'120',

            }
        },
        methods: {

//            消息通知框

            openSuccess() {
                this.$notify({
//                    title: '成功',
                    message: this.info,
                    type: 'success'
                });
            },
            openError() {
                this.$notify.error({
//                    title: '错误',
                    message: this.info
                });
            },





          //    分页
            handleSizeChange(val) {
                this.PageCount = val;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //查询库位信息
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                this.RepositoryNum = this.RepositoryNum.trim();  // 去掉用户输入的前后空格
                this.MaterielNum = this.MaterielNum.trim();
//                RepositoryNum   MaterielNum   PageCount  CurrentPage
                    url = "http://192.168.3.238:8088/RepositoryManagement/GetRepositoryManagementPage?RepositoryNum=" + this.RepositoryNum + "&MaterielNum=" + this.MaterielNum+ "&PageCount=" + this.PageCount + "&CurrentPage=" + this.CurrentPage;
                this.$http.get(url,).then(response => {
                    this.tableData = [];
                    let Code = response.data.Code;
                    if (Code == 200) {   // 正常请求到数据
                        this.Total = response.data.Total;
                        for (let i = 0; i < response.data.ObjList.length; i++) {
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index = i + 1;
                        }
                        console.log(this.tableData);
                        console.log("库位表格");
                        this.info='查询成功!';
                        this.openSuccess();

                    }
                }, response => {
                    console.log(" 库位表格查询显示失败")
                    console.log(response);
                    this.info='查询失败！';
                    this.openError();
                })
            },

            //一加载就知道有哪些物料类型
            GetMaterielType(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                this.MaterielType = 1;
                url = "http://192.168.3.238:8088/MaterielManager/GetMaterielByType?MaterielByType=" + 1;
//                console.log(url);
                this.$http.get(url,).then(response => {
                    this.MaterielTypeOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.MaterielTypeOptions = response.data.ObjList ;
//                        console.log(this.MaterielTypeOptions);
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })

            },
             //新增库位信息

            add() {
                console.log("点击新增按钮 ");
                this.dialogFormVisible = true;
                this.formLabelWidth = '120';

            },
            addForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/RepositoryManagement/AddRepositoryManagement";
                let addForm = {
                    "RepositoryNum": this.form.RepositoryNum,
                    "MaterielCode": this.form.Category,
                    "OperationUser":1,
                    "MaterielType":1

                };
                console.log("addForm中我的物料编号是："+this.form.Category);
                console.log(addForm);
                let that = this;
                if (this.form.RepositoryNum.length === 0 || this.form.Category===undefined || this.form.Category==="") {
                    alert("请输入库位名或物料类型");
                    return 0;
                }
                else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogFormVisible = false;
                            that.info='添加成功!';
                            that.openSuccess();
//                            that.openTopsuccess();
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                            that.dialogFormVisible = false;
                            that.info='添加失败！';
                            that.openError();
//                            that.openToperror();
                        });
                }
                console.log(addUrl);
            },
            //   库位信息删除
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
                console.log('+++++++');
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/RepositoryManagement/DeleteRepositoryManagement";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    ID:this.formDelete.ID,
                    OperationUser:1,
                    MaterielType:1
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功");
                        that.DeleteFormVisible = false;     //  关闭窗口
                        console.log(response);
                        that.info='删除成功!';
                        that.openSuccess();
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                        that.info='删除失败!';
                        that.openError();
                    });

            },
            //修改库位信息
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                this.formEdited=row;
                console.log("点击编辑按钮");
//                console.log(this.formEdit);
            },
            //修改物料类型（原料/辅料）
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/RepositoryManagement/UpdateRepositoryManagement";
                let EditForm = {
                    "ID":this.formEdit.ID,
                    "RepositoryNum" :this.formEdit.RepositoryNum,
                    "MaterielCode":this.formEdit.Category,
                    "OperationUser" :1
                };
                console.log("修改库位"+this.formEdit.Category);
                console.log(EditForm);
                let that = this ;
                if (this.formEdit.Category===undefined || this.formEdit.Category==="") {
                    alert("请输入物料类型");
                    return 0;
                }else{
                    this.$http.post(EditUrl, EditForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.EditFormVisible = false;
                            that.selectTable();
                            console.log("修改成功");
                            console.log(response);
                            that.info='修改成功!';
                            that.openSuccess();
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                            that.info='修改失败!';
                            that.openError();
                        });
                }

            },




        },
        mounted: function () {   //  onload
            this.GetMaterielType();
            this.selectTable();
        }
    }

</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }


    /* 表头数据居中 */
    .table_station thead tr th {
        text-align: center;
    }


</style>
